<!DOCTYPE html>
<html>
<head>
    <title>Expressions</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <div id="example">
            <h3>Basic template</h3>
            <div class="code-sample">
                <h4 class="code-title">Source:</h4>
                <pre class="prettyprint">
var inlineTemplate = kendo.template("Hello, #= firstName # #= lastName #");
var inlineData = { firstName: "John", lastName: "Doe" };
$("#inline").html(inlineTemplate(inlineData));</pre>
            </div>
            <div class="code-sample output">
                <h4 class="code-title">Output:</h4>
                <div class="prettyprint" id="inline"></div>
            </div>

            <h3>Template as script element</h3>
            <div class="code-sample">
                <h4 class="code-title">Source:</h4>
                <pre class="prettyprint">
&lt;script id="scriptTemplate" <strong>type="text/x-kendo-template"</strong>&gt;
    Hello, #= firstName # #= lastName #
&lt;/script&gt;

&lt;script&gt;
    var scriptTemplate = kendo.template($("#scriptTemplate").html());
    var scriptData = { firstName: "John", lastName: "Doe" };
    $("#script").html(scriptTemplate(scriptData));
&lt;/script&gt;</pre>
            </div>
            <div class="code-sample output">
                <h4 class="code-title">Output:</h4>
                <div class="prettyprint" id="script"></div>
            </div>

            <h3>Encoding HTML</h3>
            <div class="code-sample">
                <h4 class="code-title">Source:</h4>
                <pre class="prettyprint">
var encodingTemplate = kendo.template("HTML tags are encoded like this - ${ html }");
var encodingData = { html: "&lt;strong&gt;lorem ipsum&lt;/strong&gt;" };
$("#encoding").html(encodingTemplate(encodingData));</pre>
            </div>
            <div class="code-sample output">
                <h4 class="code-title">Output:</h4>
                <div class="prettyprint" id="encoding"></div>
            </div>

            <h3>Using JavaScript code inside the template definition</h3>
            <div class="code-sample">
                <h4 class="code-title">Source</h4>
                <pre class="prettyprint lang-html">
&lt;script id="javascriptTemplate" type="text/x-kendo-template"&gt;
    &lt;ul&gt;
    # for (var i = 0; i &lt; data.length; i++) { #
        &lt;li&gt;#= data[i] #&lt;/li&gt;
    # } #
    &lt;ul&gt;
&lt;script&gt;

&lt;script&gt;
    var javascriptTemplate = kendo.template($("#javascriptTemplate").html());
    var javascriptData = ["First", "Second", "Third"];
    $("#javascript").html(javascriptTemplate(javascriptData));
&lt;script&gt;</pre>
            </div>
            <div class="code-sample output">
                <h4 class="code-title">Output:</h4>
                <div class="prettyprint" id="javascript"></div>
            </div>

            <script id="scriptTemplate" type="text/x-kendo-template">
                Hello, #= firstName # #= lastName #!
            </script>

            <script id="javascriptTemplate" type="text/x-kendo-template">
                <ul>
                    # for (var i = 0; i < data.length; i++) { #
                        <li>#= data[i] #</li>
                    # } #
                </ul>
            </script>

            <script>
                var inlineTemplate = kendo.template("Hello, #= firstName # #= lastName #!");
                var inlineData = { firstName: "John", lastName: "Doe" };
                $("#inline").html(inlineTemplate(inlineData));

                var encodingTemplate = kendo.template("HTML tags are encoded like this - ${ html }");
                var encodingData = { html: "<strong>lorem ipsum</strong>" };
                $("#encoding").html(encodingTemplate(encodingData));

                var scriptTemplate = kendo.template($("#scriptTemplate").html());
                var scriptData = { firstName: "John", lastName: "Doe" };
                $("#script").html(scriptTemplate(scriptData));

                var javascriptTemplate = kendo.template($("#javascriptTemplate").html());
                var javascriptData = ["First", "Second", "Third"];
                $("#javascript").html(javascriptTemplate(javascriptData));
            </script>

            <style scoped>
                #example h3 {
                    clear: both;
                }

                #example .code-sample {
                    width: 70%;
                    float:left;
                    margin-bottom: 20px;
                }
                #example .code-sample h4 {
                    width: auto;
                }

                #example .output {
                    width: 24%;
                    margin-left: 0;
                    float:left;
                }
                #example pre.prettyprint {
                        height: auto;
                        min-height: 120px;
                }
            </style>
        </div>


    
    
</body>
</html>
